<template>
  <view>
    <!-- <button type='primary' @click="setStorage">存储数据</button>
    <button type='primary' @click="getStorage">获取数据</button>
    <button type='primary' @click="removeId">移除Id</button>
	
    <button @click="pullDown">下拉刷新</button>
    <view>这是列表页</view>
    <view class="box-item" v-for="item in list">
      {{item}}
    </view> -->
	<button type="primary" @click="chooseImg">上传图片</button>
	<image v-for="item in imgArr" :src="item" @click="previewImg(item)"></image>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list:['前端','JAVA','UI','测试','大数据'],
        imgArr:[]
      };
    },
    // 页面生命周期函数
    onLoad(options) {
      console.log('我希望在H5中打印')
    },
    onShow() {
      console.log("页面显示了");
    },
    onReady() {
      console.log("页面初次渲染完成");
    },
    onHide() {
      console.log("页面隐藏了");
    },
    onUnload() {
      console.log("页面卸载了");
    },
	onPullDownRefresh() {
		console.log('触发了下拉刷新')
		setTimeout(()=>{
			this.list= ['JAVA','UI','前端','测试','大数据']
			uni.stopPullDownRefresh()
		},2000)
	},
	onReachBottom(){
		console.log('页面触底了')
		this.list = [...this.list,...['JAVA','UI','前端','测试','大数据']]
	},
    methods: {
		previewImg(current){
			uni.previewImage({
				current,
				urls:this.imgArr,
				loop:true,
				indicator:'default'
			})
		},
		chooseImg(){
			uni.chooseImage({
				count:5,
				success:res=>{
					this.imgArr =res.tempFilePaths
				}
			})
		},
      setStorage(){
        //2.同步调用
        uni.setStorageSync('id',100)
      },
      getStorage(){
        //2.同步调用
        const res = uni.getStorageSync('id')
        console.log(res)
      },
      removeId(){
        //2.同步调用
        uni.removeStorageSync('id')
      },
      pullDown(){
        console.log('开启下拉刷新')
        uni.startPullDownRefresh()
      }
    },
  };
</script>

<style>
  .box-item{
    height:100px;
    line-height: 100px;
  }
  view{
    color: hotpink;
  }
</style>